<template>
	<div class="card-top">
		<image class="card-top-bg" :src="chargeMode==0?'https://oss.jxhecong.com/v2/image/site_tab_left@2x.png':'https://oss.jxhecong.com/v2/image/site_tab_right@2x.png'"></image>
		<div class="tab-list">
			<text :class="['tab-title',chargeMode==0?'active-title':'']" @click.stop="chargeModeChange(0)">站点详情</text>
			<text :class="['tab-title',chargeMode==1?'active-title':'']" @click.stop="chargeModeChange(1)">设备列表</text>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			chargeMode:{
				type:Number,
				default:0
			}
		},
		methods:{
			chargeModeChange(index){
				this.$emit('modeChange',{index:index})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-top{
		height:84rpx;
		position:relative;
	}
	.card-top-bg{
		height:84rpx;
		width:100%;
	}
	.tab-list{
		position:absolute;
		top:0rpx;
		left:0rpx;
		right:0rpx;
		height:90rpx;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
		.tab-title{
			flex:1;
			color:#202020;
			font-size:28rpx;
			text-align: center;
		}
		.active-title{
			flex:1;
			color:#6ABF6C;
			font-size:32rpx;
			font-weight: bold;
			text-align: center;
		}
	}
</style>
